<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>百度地图</title>
<!--引用百度地图API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<link rel="stylesheet" href="./jqueryui.css">
<script src="./jquery.js"></script>
<script src="./jqueryui.js"></script>
<script src="./index.js"></script>
</head>

<body>
  <!--百度地图容器-->
<center>
<div style="width:1000px;height:650px;border:#ccc solid 1px;">
  <div style="width:800px;height:600px;border:#ccc solid 1px;" id="dituContent"></div>
<br>
高度:<br>
<div id="slider"></div>
速度:<br>
<div id="slider-speed"></div><br>
</div>
<br>
<br><br>
位置:(lat,lon,hgt)
<p id="pp"></p>
<p id="jj"></p>
<p id="mm"></p>
<button onclick="start()">START</button>
</center>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(104.50553,34.39016);//定义一个中心点坐标
        map.centerAndZoom(point,5);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.disableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
    
    var lat=39.0;
	var lon=116.0;
	var hgt=100.0;
	var points=[];	
	var d2m=2*Math.PI*6371000/360;
	var xxx=-0.004983121733914686;
	var yyy=0.0029290100181746936;
	var zzx=0.006373133953118781;
	var zzy=0.006308885434897604;
	var lhf_json;
	var arrzonA=[];
	function d2l(a){//degree to linear
		return {x:a.lon*d2m,y:a.lat*d2m,z:a.alt};
	}
	function l2d(a){
		return {lon:a.x/d2m,lat:a.y/d2m,alt:a.z};
	}
	function ladd(a,b){//linear substrate
		return {x:a.x+b.x,y:a.y+b.y,z:a.z+b.z};
	}
	function lsub(a,b){
		return {x:a.x-b.x,y:a.y-b.y,z:a.z-b.z};
	}
	function lmul(a,b){
		return {x:a.x*b,y:a.y*b,z:a.z*b};
	}
	
	
	function ll(a){
		return Math.sqrt(a.x*a.x+a.y*a.y+a.z*a.z);
	}
	function norm(l){
		var lll=ll(l);
		return {x:l.x/lll,y:l.y/lll,z:l.z/lll};
	}
	var lt=0;
	var st=0;
	var pos=d2l({lon:139,lat:32,alt:10});
	var des=pos;
	var vec={x:0,y:0,z:0};
	var lines=[];
	var arrzonA_size;
	var count_arr;
	var jjjsss=0;
    initMap();//创建和初始化地图
    var mainmarker = new BMap.Marker(new BMap.Point(lon,lat));
    var mlabel = new BMap.Label("main",{offset:new BMap.Size(20,-10)});
    map.addOverlay(mainmarker);
	mainmarker.setLabel(mlabel);
	map.addEventListener("click",function(e){
		des=d2l({lon:e.point.lng,lat:e.point.lat,alt:20});
		vec=norm(lsub(des,pos));
		console.log(e.point.lng+","+e.point.lat);
//------------------------------------------------------------------------------
		pos=ladd(pos,lmul(vec,$("#slider-speed").slider("value")/10))
		
		
		lonb=l2d(pos).lon;
		latb=l2d(pos).lat;
		alt=l2d(pos).alt;
		var gcj = coordtransform.bd09togcj02(lonb,latb);
		var wgs = coordtransform.gcj02towgs84(gcj[0],gcj[1]);
		lon=wgs[0];
		lat=wgs[1];
		//console.log("NOW:"+lon+","+lat);
		
		var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', 'https://restapi.amap.com/v3/direction/walking?origin='+(lon-xxx)+','+(lat-yyy)+'&destination='+(e.point.lng-zzx)+','+(e.point.lat-zzy)+'&key=your_key', true);
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
		
		$("#jj").html("https://www.amap.com/regeo?lng="+(lon-xxx)+"&lat="+(lat-yyy));

//-------------------------------------------------------------------------------------------------
		$("#mm").html("https://www.amap.com/regeo?lng="+(e.point.lng-zzx)+"&lat="+(e.point.lat-zzy));
		
//------------------------------------------------------------------------------------------------------
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                lhf_json = httpRequest.responseText;//获取到json字符串，还需解析
                //console.log(lhf_json);

				var zong=JSON.parse(lhf_json)["route"]["paths"];
				var duan1_size=zong.length;

				var arrB=[];
				var arrC=[];
				var arrD=[];
				arrzonA=[];
				for(var zong_ci=0;zong_ci<duan1_size;zong_ci++)
				{
					var duan2_size=zong[zong_ci]["steps"].length;
					for(var duan2_ci=0;duan2_ci<duan2_size;duan2_ci++)
					{
						arrB=zong[zong_ci]["steps"][duan2_ci]["polyline"].split(';');
						//console.log("1111:"+arrB);
						//console.log("22222:"+toString(arrB));
						arrC=arrB.join(',').split(',');
						arrD.push(arrC);
						
						//arrD.push(arrC);

					}
				}
				var addsuzu=new Array(e.point.lng-zzx,e.point.lat-zzy);
				arrD.push(addsuzu);
				arrzonA=arrD.join(',').split(',');
				console.log(arrzonA);
				

				
            }
        };

		
		
		map.clearOverlays(); 

		for(jjjsss=0;jjjsss<arrzonA.length;jjjsss+=2)
		{
			marker = new BMap.Marker(new BMap.Point(parseFloat(arrzonA[jjjsss])+zzx,parseFloat(arrzonA[jjjsss+1])+zzy));
			map.addOverlay(marker);
		}
		des=d2l({lon:parseFloat(arrzonA[0])+zzx,lat:parseFloat(arrzonA[1])+zzy,alt:20});
		vec=norm(lsub(des,pos));
		jjjsss=0;
		
	});
	    map.addEventListener("dblclick",function(e){
		pos=d2l({lon:e.point.lng,lat:e.point.lat,alt:20});
		console.log(e.point.lng+","+e.point.lat);
	});

	
	function post(){

	
	//hgt=$("#slider").slider("value");
	console.log(ll(lsub(des,pos)));
	if(ll(lsub(des,pos))>=1){
		//map.clearOverlays(); 
		pos=ladd(pos,lmul(vec,$("#slider-speed").slider("value")/10))
		lonb=l2d(pos).lon;
		latb=l2d(pos).lat;
		alt=l2d(pos).alt;
		var gcj = coordtransform.bd09togcj02(lonb,latb);
		var wgs = coordtransform.gcj02towgs84(gcj[0],gcj[1]);
		lon=wgs[0];
		lat=wgs[1];
		//mainmarker.setPosition(new BMap.Point(lon,lat));
		marker = new BMap.Marker(new BMap.Point(lonb,latb));
		map.addOverlay(marker);
		//console.log(lon+","+lat);
	}
	else
	{	
		if(jjjsss>=arrzonA.length+2)
		{
			return;
		}
		des=d2l({lon:parseFloat(arrzonA[jjjsss])+zzx,lat:parseFloat(arrzonA[jjjsss+1])+zzy,alt:20});
		vec=norm(lsub(des,pos));
		jjjsss+=2;
	}

	$("#pp").html("lon:"+lon+"  lat:"+lat+"  hgt:"+hgt+"spd:"+$("#slider-speed").slider("value")/1);
	//$("#jj").html("https://www.amap.com/regeo?lng="+(lon-xxx)+"&lat="+(lat-yyy));
	$.post("/post",{"lon":lon,"lat":lat,"hgt":hgt});
	$("#pp").html("lon:"+lon+"  lat:"+lat+"  hgt:"+hgt+"spd:"+$("#slider-speed").slider("value")/1);
	//$("#jj").html("https://www.amap.com/regeo?lng="+(lon-xxx)+"&lat="+(lat-yyy));
	}
 	$(function() {
    	$( "#slider" ).slider({
      	min: -1000,
      	max: 1,
      	value: 10,	
	});
	$( "#slider-speed" ).slider({
      	min: 0,
      	max: 20,
      	value: 0,	
	});
	setInterval(post,30);
  	});
</script>

</html>
